import React, { Component } from 'react';
import './conterBottom.scss';
import axios from 'axios';
export default class ConterBottom extends Component {
    state={
        detailsList:[]
    }
    componentDidMount(){
        axios.get('/api/centerPageData').then(res=>{
            this.setState({detailsList:res.data.detailsList},()=>{
            });
        })
    }
    render() {
        return (
            <div className='conterBottom'>
                {
                    this.state.detailsList.map((item,index)=>{
                        return(
                            <div className='item' key={index}>
                                <dl>
                                    <dt><img src={item.img} alt=""/>
                                    </dt>
                                    <dd>
                                        <p className='title'>{item.title}</p>
                                        <p>
                                            <label>{item.number}</label>
                                            <span>{item.unit}</span>
                                        </p>
                                    </dd>
                                </dl>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}
